<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="province">
        <option>选择省份</option>
    </select>
    <select id="city">
        <option>选择市区</option>
    </select>
    <script>
        var provinceDom = document.querySelector("#province")
        var cityDom = document.querySelector("#city")
        var data = [
            {
                name: '湖北省',
                children: ['武汉市', '随州市']
            },
            {
                name: '河南省',
                children: ['郑州市', '平顶山市']
            }
        ]

        // var data = [
        //     {
        //         name: '湖北省',
        //         children: [
        //             {
        //                 city : "武汉" ,
        //                 qu : ['江夏' , '洪山']
        //             }，
        //         ]
        //     },
        //     {
        //         name: '河南省',
        //         children: ['郑州市', '平顶山市']
        //     }
        // ]

        var provinceHtml = "<option value='-1'>选择省份</option>"
        data.forEach(function (item, index) {
            provinceHtml += `<option value='${index}'>${item.name}</option>`
        })
        document.querySelector('#province').innerHTML = provinceHtml
        document.querySelector('#province').onchange = function () {
            var index = this.value
            console.log(index)
            var cityHtml = "<option>选择市区</option>"
            if (index >= 0) {
                data[index].children.forEach(function (item) {
                    cityHtml += `<option>${item}</option>`
                })
                document.querySelector('#city').innerHTML = cityHtml
            }
        }
    </script>
</body>

</html>